<template>
	<view>
		<!-- 顶部导航 -->
		<fa-navbar title="个人中心" :border-bottom="false"></fa-navbar>
		<u-sticky :enable="false">
			<view class="" :style="[{ backgroundColor: theme.bgColor || '#2979ff' }]">
				<view class="u-p-l-30 u-p-r-30 u-flex u-row-between">
					<view class="u-flex" @click="openPage(13)">
						<u-avatar :src="vuex_user.avatar" :show-level="true" level-icon="level" size="120"></u-avatar>
						<view class="u-m-l-20" :style="[{ color: theme.color }]">
							<view class="u-font-40 u-p-l-10 u-line-1 user-tag" v-text="vuex_user.nickname || (vuex_token ? '-' : '未登录')"></view>
							<view class="u-m-10 u-line-1 user-tag" v-text="vuex_user.bio || vuex_bio"></view>
						</view>
					</view>
					<!-- <view class="" @click="openPage(10)"><u-tag text="余额充值" shape="circle" type="warning" border-color="#fdf6ec" /></view> -->
				</view>
				<view class="u-flex u-p-t-50 u-p-b-50 u-row-between u-text-center">
					<view class="user-item" @click="openPage(11)">
						<view class="u-font-40" :style="[{ color: theme.color }]" v-text="total.money || 0"></view>
						<view class="u-font-20" :style="[{ color: theme.lightColor }]">余额</view>
					</view>
					<view class="user-item" @click="openPage(12)">
						<view class="u-font-40" :style="[{ color: theme.color }]" v-text="total.score || 0"></view>
						<view class="u-font-20" :style="[{ color: theme.lightColor }]">积分</view>
					</view>
					<view class="user-item" @click="openPage(1)">
						<view class="u-font-40" :style="[{ color: theme.color }]" v-text="total.answers || 0"></view>
						<view class="u-font-20" :style="[{ color: theme.lightColor }]">回答</view>
					</view>
					<view class="user-item" @click="openPage(4)">
						<view class="u-font-40" :style="[{ color: theme.color }]" v-text="total.followers || 0"></view>
						<view class="u-font-20" :style="[{ color: theme.lightColor }]">关注</view>
					</view>
				</view>
			</view>
		</u-sticky>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="moments" title="最新动态" :arrow="false" @click="openPage(14)"><u-icon slot="right-icon" size="30" name="arrow-right"></u-icon></u-cell-item>
				<u-cell-item icon="question-circle-fill" title="我的提问" :arrow="false" @click="openPage(0)">
					<u-badge :count="total.unadopted" v-if="total.unadopted > 0" :absolute="false" slot="right-icon" :bgColor="theme.bgColor" :color="theme.color"></u-badge>
					<u-icon slot="right-icon" size="30" name="arrow-right"></u-icon>
				</u-cell-item>
				<u-cell-item icon="edit-pen" title="我的回答" :arrow="false" @click="openPage(1)"><u-icon slot="right-icon" size="30" name="arrow-right"></u-icon></u-cell-item>
				<u-cell-item icon="file-text" title="我的文章" :arrow="false" @click="openPage(2)"><u-icon slot="right-icon" size="30" name="arrow-right"></u-icon></u-cell-item>
				<u-cell-item icon="pushpin-fill" title="每日一签" :arrow="false" @click="openPage(17)"><u-icon slot="right-icon" size="30" name="arrow-right"></u-icon></u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="account-fill" title="我的粉丝" :arrow="false" @click="openPage(3)"><u-icon slot="right-icon" size="30" name="arrow-right"></u-icon></u-cell-item>
				<u-cell-item icon="plus-square-fill" title="我的关注" :arrow="false" @click="openPage(4)">
					<u-icon slot="right-icon" size="30" name="arrow-right"></u-icon>
				</u-cell-item>
				<u-cell-item icon="star" title="我的收藏" :arrow="false" @click="openPage(5)"><u-icon slot="right-icon" size="30" name="arrow-right"></u-icon></u-cell-item>
				<u-cell-item icon="volume-up" title="我的通知" :arrow="false" @click="openPage(6)">
					<u-badge
						:count="total.notifications"
						v-if="total.notifications > 0"
						:absolute="false"
						slot="right-icon"
						:bgColor="theme.bgColor"
						:color="theme.color"
					></u-badge>
					<u-icon slot="right-icon" size="30" name="arrow-right"></u-icon>
				</u-cell-item>
				<u-cell-item icon="chat" title="我的私信" :arrow="false" @click="openPage(7)">
					<u-badge :count="total.messages" v-if="total.messages > 0" :absolute="false" slot="right-icon" :bgColor="theme.bgColor" :color="theme.color"></u-badge>
					<u-icon slot="right-icon" size="30" name="arrow-right"></u-icon>
				</u-cell-item>
				<u-cell-item icon="share" title="邀请我回答的" :arrow="false" @click="openPage(8)">
					<u-badge :count="total.invites" v-if="total.invites > 0" :absolute="false" slot="right-icon" :bgColor="theme.bgColor" :color="theme.color"></u-badge>
					<u-icon slot="right-icon" size="30" name="arrow-right"></u-icon>
				</u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<!-- <u-cell-item icon="man-add-fill" title="绑定账号" :arrow="false" @click="openPage(15)">
					<u-icon slot="right-icon" size="30" name="arrow-right"></u-icon>
				</u-cell-item> -->
				<u-cell-item icon="setting" title="设置" :arrow="false" @click="openPage(9)"><u-icon slot="right-icon" size="30" name="arrow-right"></u-icon></u-cell-item>
				<!-- <u-cell-item icon="home-fill" title="关于我们" :arrow="false" @click="openPage(16)"><u-icon slot="right-icon" size="30" name="arrow-right"></u-icon></u-cell-item> -->
			</u-cell-group>
		</view>
		<u-top-tips ref="uTips" :navbar-height="statusBarHeight + navbarHeight"></u-top-tips>
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
export default {
	onShow() {
		if (this.$store.state.user.isLogin) {
			this.init();
		}
	},
	data() {
		return {
			// 状态栏高度，H5中，此值为0，因为H5不可操作状态栏
			statusBarHeight: uni.getWindowInfo().statusBarHeight,
			// 导航栏内容区域高度，不包括状态栏高度在内
			navbarHeight: 44,
			total: {},
			current: 0,
			userInfo:{}
		};
	},
	methods: {
		init: async function() {
			uni.stopPullDownRefresh();
			if (this.vuex_token) {
				let user = uni.getStorageSync('wanlshop:user')
				let ret = await this.$api.getUserIndex({
					id: user.user_id
				});
				if (!ret.code) {
					this.$u.toast(ret.msg);
					return;
				}
				this.$u.vuex('vuex_user', ret.data.user);
				this.$u.vuex('vuex_isAdmin', ret.data.isAdmin);
				this.userInfo = ret.data;
				
				
				let res = await this.$api.getMyTotal();
				if (!res.code) {
					this.$u.toast(res.msg);
					return;
				}
				this.total = res.data;
			} else {
				this.$u.toast('请先登录')
				this.total = {};
				this.$u.vuex('vuex_user', {});
			}
		},
		openPage(index) {
			console.log(this.vuex_user)
			let user = uni.getStorageSync('wanlshop:user')
			if (index == 16) {
				this.$wanlshop.to('/pages/community/other/about');
				return;
			}
			if (!this.vuex_token) {
				this.$wanlshop.to('/pages/user/auth/name')
				return;
			}
			if(index==17 && !this.vuex_user.is_install_signin){
				this.$refs.uTips.show({
					title: '请先安装会员签到插件插件或启用该插件',
					type: 'error',
					duration: '3000'
				});							
				return;
			}
			let p = {
				'0': { path: `/pages/community/my/question?type=${this.total.unadopted > 0 ? 'unsolved' : ''}`},
				'1': { path: '/pages/community/my/answer' },
				'2': { path: '/pages/community/my/article' },
				'3': { path: '/pages/community/my/follower' },
				'4': { path: '/pages/community/my/attention' },
				'5': { path: '/pages/community/my/collection' },
				'6': { path: `/pages/community/my/notification?act=${this.total.notifications > 0 ? 'marktop' : ''}`},
				'7': { path: `/pages/community/my/message?act=${this.total.messages > 0 ? 'marktop' : ''}`},
				'8': { path: `/pages/community/my/invite?act=${this.total.invites > 0 ? 'marktop' : ''}`},
				'9': { path: '/pages/community/setting/setting' },
				'10': { path: '/pages/community/my/recharge' },
				'11': { path: '/pages/community/logs/money' }, //余额日志
				'12': { path: '/pages/community/logs/score' }, //积分日志
				'13': { path: '/pages/community/setting/myinfo' },
				'14': { path: `/pages/community/user/index?user_id=${user.id}`},
				'15': { path: '/pages/community/my/bind' },
				'17': { path: '/pages/community/signin/signin' }
			};
			this.$api.signinConfig().then(res => {
				if (res.code) {
					this.$u.vuex('vuex_signin', res.data);
				}
			});
			this.$wanlshop.to(`${p[index].path}`);
		}
	},
	//下拉刷新
	onPullDownRefresh() {
		this.init();
	}
};
</script>

<style lang="scss">
page {
	background-color: #ededed;
}
.camera {
	width: 54px;
	height: 44px;

	&:active {
		background-color: #ededed;
	}
}

.user-item {
	width: 25%;
	position: relative;
}
.user-item:not(:last-child)::after {
	content: ' ';
	position: absolute;
	left: 0;
	top: 30%;
	pointer-events: none;
	box-sizing: border-box;
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	width: 199.8%;
	height: 100%;
	-webkit-transform: scale(0.5, 0.5);
	transform: scale(0.5, 0.5);
	border-right: 2rpx solid #95bcfb;
	z-index: 2;
}
.user-tag {
	width: 350rpx;
}
</style>
